<template>
  <div class="main">
    <div class="header">
      <div >
        <!-- 选择查询类型 -->
        <el-radio-group v-model="radio1" @change="handle()">
          <el-radio-button label="商品类型"></el-radio-button>
          <el-radio-button label="员工"></el-radio-button>
        </el-radio-group>
      </div>

      <component :is="header" @option="onFn"></component>
    </div>

    <div class="echarts">
      <!-- <component :is="echart"></component> -->
      <echart :option="option"></echart>
    </div>
  </div>
</template>

<script>
import shangpinheader from "./Xiaoshouguanli/header/shangpinheader.vue";
import yuangongheader from "./Xiaoshouguanli/header/yuangongheader.vue";
import echart from "./Xiaoshouguanli/Echarts.vue";
import getseries from '../../utils/getserise.js'
export default {
  components: {
    shangpinheader,
    yuangongheader,
    echart,
  },
  data() {
    return {
      option: "",
      input2: "",
      radio1: "商品类型",
      header: shangpinheader,
      timer:null
    };
  },
  methods: {
    //子组件查看传递过来的数据
    onFn(v) {
      this.option = v;
    },
    // 查询类型选择的头部
    handle() {
      // 查看商品销量
      if (this.radio1 == "商品类型") {
        this.header = shangpinheader;
        clearTimeout(this.timer)
        this.getshangpin();
      }
      //查看员工
      if (this.radio1 === "员工") {
        this.header = yuangongheader;
        clearTimeout(this.timer)
        this.timer=setTimeout(() => {
          this.getyuangong();
        }, 1000);
      }
    },
    getyuangong() {
      let option = {
        legend: {
          top: "bottom",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: "面积模式",
            type: "pie",
            radius: [50, 250],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: [
               { value: 400, name: "李红 销售量 "+400 },
              { value: 380, name: "王红 销售量 "+380 },
              { value: 320, name: "张红 销售量 "+320 },
              { value: 300, name: "张三 销售量 "+300  },
              { value: 280, name: "李四 销售量 "+280  },
              { value: 260, name: "李明 销售量 "+260 },
              { value: 220, name: "cz 销售量 "+220  },
              { value: 180, name: "tom 销售量 "+180  },
            ],
          },
        ],
      };
      this.option = option;
    },
    getshangpin() {
      this.$axios({
        url:'/findall'
      }).then(res =>{
        let data =res.data.data
        const {arr,names} = getseries(data);
        console.log(arr);
        console.log(names);
        this.option = {
        title: {
          text: "商品年销量",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: names
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "2019",
            "2020",
            "2021",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: arr,
      };
      console.log(this.option);

      }).catch(err =>{
        console.log(err);
      })
    },
  },
  created() {
    this.getshangpin();
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  width: 80%;
}
.main {
  position: relative;
  width: 90%;
  background: #ffffff;
  border-radius: 15px;
  padding: 10px 20px;
}
.echarts{
  padding: 10px 20px;
}
</style>